<template>
  <div>
    <h1 style="font-size: 28px">用户详情</h1>
    <div>
      <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
        <a-form-item label="账号名称">
          <a-input :value="user_name" disabled/>
        </a-form-item>
        <a-form-item label="用户昵称">
          <a-input :value="nick_name" disabled/>
        </a-form-item>
        <a-form-item label="邮箱">
          <a-input :value="mail" disabled/>
        </a-form-item>
        <a-form-item label="手机号">
          <a-input :value="phone_number" disabled/>
        </a-form-item>
        <a-form-item label="性别">
          <a-input :value="gender == 0?'男':'女'" disabled/>
        </a-form-item>
        <a-form-item label="地址">
          <a-input :value="address" disabled/>
        </a-form-item>
        <a-form-item label="状态">
          <a-input :value="status == 0?'正常':'停用'" disabled/>
        </a-form-item>
        <a-form-item label="登录IP">
          <a-input :value="last_login_ip" disabled/>
        </a-form-item>
        <a-form-item label="登录时间">
          <a-input :value="last_login_time" disabled/>
        </a-form-item>
        <a-form-item label="创建时间">
          <a-input :value="create_time" disabled/>
        </a-form-item>
        <a-form-item label="更新时间">
          <a-input :value="update_time" disabled/>
        </a-form-item>
        <a-form-item label="角色">
          <a-input :value="role_name" disabled/>
        </a-form-item>
        <a-form-item label="描述">
          <a-textarea :value="intro" disabled/>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button style="width: 140px;" @click="onBack">返回</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts">
  import {defineComponent, reactive, toRefs} from 'vue';

  export default defineComponent({
    name: 'UserDetail',
    props: {
      item: {
        type: Object,
        default: null,
      },
      viewType: {
        type: String,
        default: null,
      }
    },
    setup(props, {emit}) {

      const data = reactive({
        id: props.item.id,
        user_name: props.item.user_name,
        nick_name: props.item.nick_name,
        phone_number: props.item.phone_number,
        mail: props.item.mail,
        identity_number: props.item.identity_number,
        intro: props.item.intro,
        gender: props.item.gender,
        address: props.item.address,
        status: props.item.status,
        last_login_ip: props.item.last_login_ip,
        last_login_time: props.item.last_login_time,
        create_time: props.item.create_time,
        update_time: props.item.update_time,
        role_id: props.item.role_id,
        role_name: props.item.role_name,
      });

      const onBack = () => {
        emit("my-emit", 'Cancel');
      }

      return {
        ...toRefs(data),
        onBack,
      };
    }
  });

</script>

<style scoped>

</style>
